import React, { Component } from 'react';
import { Button, Drawer, Input, Row, Col, Tooltip, Form, List, Select, Card, message, notification } from 'antd';
import { inject, observer } from 'mobx-react';
import { listUserType, listRole, pinyin } from '../service/index';
import '../less/index.less';
import RoleDialog from './RoleDialog';
import { CloseOutlined, PlusOutlined, QuestionOutlined } from '@ant-design/icons';

@inject('store', 'roleStore')
@observer
class UserDrawer extends Component {
  formRef = React.createRef();
  state = {
    userStatus: [
      { id: '1', name: '正常' },
      { id: '2', name: '冻结' },
      { id: '3', name: '注销' },
    ],
  };

  onClose = () => {
    this.props.store.closeUserDrawer();
  };

  onAddUserRole = () => {
    this.props.roleStore.showRoleDialog({ visible: true, roles: this.props.store.userDrawerData.roles });
  };

  onDeleteUserRole = item => {
    this.props.store.deleteUserRole(item);
  };

  onRoleOk = roles => {
    this.props.store.addUserRole(roles);
    this.handleRoleCancel();
  };

  onRoleCancel = () => {
    this.setState({ roleDialogData: { ...this.state.roleDialogData, visible: false } });
  };

  onConfirm = async () => {
    const { store } = this.props;
    try {
      let values = await this.formRef.current.validateFields();
      let result = await store.saveUser(values);
      if (result.code != 0) {
        notification['warning']({
          message: '提示',
          description: result.msg,
        });
        return;
      }
      await store.listUser();
      store.closeUserDrawer();
      message.info('保存用户信息成功！');
    } catch (e) {
      console.log(e);
    }
  };


  render() {
    const { store } = this.props;
    let { editData, roles, visible, loading } = store.userDrawerData;
    let values = { ...editData, status: editData.status == null ? '1' : editData.status };
    if (!values.type) {
      values.type = store.userType[0] ? store.userType[0].code : null;
    }

    const layout = { labelCol: { span: 6 }, wrapperCol: { span: 18 } };
    const oneItemLayout = { labelCol: { span: 3 }, wrapperCol: { span: 21 } };
    return (
      <Drawer visible={visible} width={800} closable={false} bodyStyle={{ padding: '5px 15px 60px 15px' }}
              onClose={this.onClose} destroyOnClose>
        <Card title="用户信息" bordered={false} size='small'>
          <Form {...layout} ref={this.formRef} initialValues={values}>
            <Form.Item name='orgId' noStyle={true}><Input type="hidden"/></Form.Item>
            <Form.Item name='deptId' noStyle={true}><Input type="hidden"/></Form.Item>
            <Form.Item name='uid' noStyle={true}><Input type="hidden"/></Form.Item>
            <Row>
              <Col span={12}>
                <Form.Item label="登录帐号" name='loginName'
                           rules={[{ required: editData.uid == null ? true : false, message: '请输入登录帐号！' }]}>
                  <Input disabled={editData.uid == null ? false : true} autoComplete="off"/>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="密码" name='password'
                           rules={[{ required: editData.uid == null ? true : false, message: '请输入密码！' }]}>
                  <Input disabled={editData.uid == null ? false : true} autoComplete="off"/>
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <Form.Item label="用户姓名" name='name' rules={[{ required: true, message: '请输入用户姓名！' }]}>
                  <Input autoComplete="off" onChange={e => store.handlePinyin(e.target.value)}/>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="姓名拼音" name='pinyin'>
                  <Input autoComplete="off"/>
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <Form.Item label="手机号码" name='mobile'>
                  <Input autoComplete="off"/>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="联系电话" name='tel'>
                  <Input autoComplete="off"/>
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <Form.Item label="传真" name='fax'>
                  <Input autoComplete="off"/>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="email" name='email' rules={[{ type: 'email', message: '请输入有效格式的电子邮箱!' }]}>
                  <Input autoComplete="off"/>
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <Form.Item label="身份证号" name='idNo'>
                  <Input autoComplete="off"/>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item name='extCode' label={(
                  <span>扩展码&nbsp;<Tooltip title="扩展码不填写时，默认为组织机构代码。">
                    <QuestionOutlined/>
                  </Tooltip></span>)}>
                  <Input autoComplete="off"/>
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <Form.Item label="用户类型" name='type'>
                  <Select>
                    {store.userType.map(function(item, i) {
                      if (!item.code) return;
                      return <Select.Option key={item.code} value={item.code}>{item.name}</Select.Option>;
                    })}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="用户状态" name='status'>
                  <Select>
                    {this.state.userStatus.map(function(item, i) {
                      if (!item.id) return;
                      return <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>;
                    })}
                  </Select>
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={24}>
                <Form.Item {...oneItemLayout} label="通讯地址" name='addr'>
                  <Input autoComplete="off"/>
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={24}>
                <Form.Item {...oneItemLayout} label="描述" name='remark'>
                  <Input.TextArea autoComplete="off"/>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Card>
        <Card title="拥有角色" size='small' bordered={false}>
          <List dataSource={roles} renderItem={item =>
            (<List.Item
              actions={[<Button title='删除' size={'small'} type="ghost" shape="circle" icon={<CloseOutlined/>}
                                onClick={() => this.onDeleteUserRole(item)}/>]}>
              <List.Item.Meta
                title={item.name}
                // description={item.remark}
              />
            </List.Item>)}
          />
          <Button block icon={<PlusOutlined/>} onClick={this.onAddUserRole}>添加角色</Button>
        </Card>
        <div className='footer'>
          <Button onClick={this.onClose} style={{ marginRight: 8 }}>返回</Button>
          <Button loading={loading} onClick={this.onConfirm} type="primary">保存</Button>
        </div>
        <RoleDialog/>
      </Drawer>);
  }
}

export default UserDrawer;
